<template>
	<div class="goods">
		<head-goods-search :is_search="true" @sendSearch="sendSearch"></head-goods-search>
		<div class="goods-contanier">
			<view class="goods-menu">
				<view class="li" v-for="(item,index) in menu" :key="index" :class="{active:isActive==index}" @click="changeType(index)">
                    <i class="hd-icon" style="display:inline-block;font-size:26rpx;" v-if="item.icon">&#xe696;</i> 
                    {{item.name}}
                </view>
			</view>
			<!-- 商品列表 -->
			<view class="goods-list">
				<view class="li" v-for="(item,index) in goodsList" :key="index" @click="navigateGoods(item.id)">
					<img :src="item.logo"/>
					<div>
						<h3>{{item.title}}</h3>
						<p>¥{{item.price}}元</p>
					</div>
				</view>
			</view>
			<paging v-if="count>0" :total="count" activecolor="#fff" activebackground="#fd8197" :pageSize='pagesize'  :current="page" @changes="dd"></paging>
		</div>
		<!-- 销量与猜你喜欢 -->
		<sales leftTitle="销量排行榜" rightTitle="猜你喜欢" :leftList="leftList" :rightList="rightList"></sales>
		<!-- 评论区域 -->
		<div class="rote-container">
			<h3>用户评论</h3>
			<view class="rote-list">
				<li v-for="(item,index) in thenCommentList" :key="index">
					<img :src="item.logo"/>
					<div class="rote-desc">
						<div class="rote-head">
							<h3>{{item.nickname}}</h3>
							<time>{{item.pingjiatime}}</time>
						</div>
						<p>{{item.pingjiaremark}}</p>
					</div>
				</li>
			</view>
		</div>
		<foot-bottom></foot-bottom>
		<fab :topBtn="isTopBtn"></fab>
        <graceBottomDialog :show="showSm" v-on:closeDialog="showSm=false">
            <view slot="content">
                <span class="hd-icon close" @click="showSm=false">&#xe655;</span>
                <scroll-view class="scroll-classFiy" scroll-y>
                    <div class="scroll-classFiy-item">
                        <h2>产品分类：</h2>
                        <view class="ul">
                            <view class="li" :key="index" @click="changeTab(index,item.id)" v-for="(item,index) in classfiy" :class="{active:isActiveTab==index}">{{item.name}}</view>
                        </view>
                    </div>
                    <div class="scroll-classFiy-item">
                        <h2>产品子类：</h2>
                        <view class="ul">
                            <view @click="changeTabTag(index,item.id)" :class="{active:isActiveTabTag==index}" :key="index" v-for="(item,index) in classfiy[isActiveTab].child">{{item.name}}</view>
                        </view>
                    </div>
                    <div class="scroll-classFiy-item" v-if="hotClass.length>=1">
                        <h2>热门分类：</h2>
                        <view class="ul">
                            <view @click="goBrand(index,item.id)"  :class="{active:isActiveHotTab==index}"  v-for="(item,index) in hotClass" :key="index">{{item.name}}</view>
                        </view>
                    </div>
                </scroll-view>
            </view>    
        </graceBottomDialog>
	</div>   
</template>

<script>
    import graceBottomDialog from '@/graceUI/components/graceBottomDialog.vue';
	import footBottom from '@/components/footBottom'; //公共底部
	import fab from '@/components/fab'; //快捷菜单
	import { shopGoodsList,siteIndexGoods } from '@/api/shop';
	import { allGoodsList,IndexGoods,getRelatedGoodsCategory } from '@/api/goods'
	import paging from '@/components/yang-paging/fy.vue'
	export default {
	    data() {
	    	return {
                showSm:false,
				page:1,
				isTopBtn:false,
				pagesize:20,
				count:null,
				goodsId:'',
				goodsList:[],
				thenCommentList:[],
				isActive:0,
                isActiveTab:0,
                isActiveTabTag:0,
				isActiveHotTab:-1,
				leftList:[],
				rightList:[],
				keywords:'',
				menu:[{
					name:'默认'
				},{
					name:'销量'
				},{
					name:'评价'
				},{
					name:'最新'
				},{
                    icon:true,
					name:'筛选'
				}],
                classfiy:[{
                    name:'全部',
                    id:0,
                    child:[{
                        name:'全部',
                        id:0
                    }]
                }],
                hotClass:[],
				cat_id:0
	    	}
	    },
		async onLoad(e){
			// 初始化分类
            const classfiy = await JSON.parse(this.$Shop.getStorage('classfiy'))
            classfiy.forEach((item,index)=>{
				let newChild = [{
					'name':'全部',
					'id':0
				}];
				for(let i in item.child){
					newChild.push({
						'name':item.child[i].name,
						'id':item.child[i].id
					})
				}
				item.child = newChild
				this.classfiy.push(item)
            })
			//如果接收到分类
            if(e.cat_id){
				this.cat_id = e.cat_id
                getRelatedGoodsCategory(e.cat_id).then((res)=>{
					 this.hotClass = res.data.datas
                })
				this.filterCheck(this.classfiy)
            }else{ //点击首页全部初始化
                getRelatedGoodsCategory(0).then((res)=>{
                    this.hotClass = res.data.datas
                })
            }
			if(e.keyword){
				this.keywords  = e.keyword
			}
			if(e.id){
				this.goodsId =e.id;
				this.getShopList(this.page,1,this.goodsId,this.keywords )
				siteIndexGoods(e.id).then((res)=>{
					this.leftList = res.data.datas.salesGoodsList
					this.rightList = res.data.datas.likeGoodsList
					this.thenCommentList = res.data.datas.commentList
				})
			}else{
				//主站产品
				this.getList(this.page,'',1,this.keywords)
				IndexGoods().then((res)=>{
					this.leftList = res.data.datas.salesGoodsList
					this.rightList = res.data.datas.likeGoodsList
					this.thenCommentList = res.data.datas.commentList
				})
			}
		},
		components:{
			footBottom,
			fab,
			paging,
            graceBottomDialog
		},
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
		methods:{
			filterCheck(data){
				data.forEach((item,index)=>{
					item.child.forEach((itemChild,itemChildIndex)=>{
						if(itemChild.id==this.cat_id){
							this.isActiveTab =  index;
							this.isActiveTabTag = itemChildIndex;
							return
						}
					})
				})
			},
            changeTab(index,id){
                this.isActiveTab = index
				this.isActiveTabTag = 0
				this.isActiveHotTab = -1
				this.changeDataList(id)
            },
            goBrand(index,id){
                this.isActiveHotTab = index
                uni.navigateTo({
                	url:`../shop/index?id=${id}`
                });
            },
            changeTabTag(index,id){
                this.isActiveTabTag = index
                this.isActiveHotTab = -1
				this.changeDataList(id)
            },
			changeDataList(id){ //点击分类后执行的公共方法
				this.cat_id = id
				this.page=1;
				this.goodsList = []
				if(this.goodsId){//店铺
					this.getShopList(this.page,1,this.goodsId,this.keywords)
				}else{ //主站
					this.getList(this.page,'',1,this.keywords)
				}
				getRelatedGoodsCategory(this.cat_id).then((res)=>{
					 this.hotClass = res.data.datas
				})
				this.showSm = false
			},
			navigateGoods(id){
				this.$Shop.navigateGoods(id)
			},
			sendSearch(k){
				this.keywords = k;
				if(this.goodsId){//店铺
					this.getShopList(this.page,1,this.goodsId,this.keywords)
				}else{ //主站
					this.getList(this.page,'',1,this.keywords)
				}
			},	
			getList(page,id,type,k){
				allGoodsList(page,this.pagesize,type,k,this.cat_id).then((res)=>{
					this.goodsList=res.data.datas
					this.count = res.data.count?res.data.count:0
				})
			},
			getShopList(page,type,id,k){
				shopGoodsList(page,this.pagesize,type,id,k,this.cat_id).then((res)=>{
					this.goodsList=res.data.datas
					this.count = res.data.count?res.data.count:0
				})
			},
			changeType(e){
				this.isActive = e
                if(e==4){
                    this.showSm = true
                    return
                }
                this.page=1;
				if(!this.goodsId){
					this.getList(this.page,'',e+1,this.keywords)
				}else{
					this.getShopList(this.page,e+1,this.goodsId,this.keywords)
				}
			},
			dd(index){
				this.page=index
				if(!this.goodsId){
					allGoodsList(index,this.pagesize,this.isActive+1,this.keywords,this.cat_id).then((res)=>{
						this.goodsList=res.data.datas
					})
				}else{
					shopGoodsList(this.page,this.pagesize,this.isActive+1,this.goodsId,this.keywords,this.cat_id).then((res)=>{
						this.goodsList=res.data.datas
					})
				}
			},
			trigger(e){
				uni.redirectTo({
				    url: e.item.url
				}); 
			},
			navigateTo(url){
				uni.navigateTo({
				    url: url
				});
			}
		},
	}
</script>

<style lang="scss">
    .close{
        position: absolute;
        right:20rpx;
        top:20rpx;
        z-index: 99;
    }
    .scroll-classFiy{
        width: 100%;
        background: #fff;
        height:100vh;
        .scroll-classFiy-item{
            padding:20rpx 40rpx;
            h2{
                font-size:30rpx;
                color:#343434;
                position: relative;
                &::before{
                    content: "";
                    border-left: 3px solid #e50000;
                    height:1.1rem;
                    position: absolute;
                    top: .2rem;
                    left: -0.5rem;
                }
            }
            .ul{
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                margin-top:20rpx;
                .li{
                    display: inline-block;
                    padding: 0.3rem 1rem;
                    margin: 0 0.5rem 0.5rem 0;
                    border: 1px solid #e6e6e6;
                    font-size: 1rem;
                    &.active{
                        border: 1px solid #e50000;
                            color: #e50000;
                    }
                }
            }
        }
    }
	.goods-contanier{
		margin-top:110rpx;
		padding-bottom:40rpx;
		.goods-menu{
			display: flex;
			justify-content: space-between;
			background: #fff;
			border-bottom: 1px solid #d1d1d1;
			.li{
				width:20%;
				text-align: center;
				border-right: 1px solid #d1d1d1;
				padding:14rpx 0;
				color:#666;
				font-size:28rpx;
				&.active{
					border-bottom: 1px solid #fd8197;
					color:#fd8197;
				}
			}
		}
		.goods-list{
			.li{
				display: flex;
				justify-content: space-between;
				padding:24rpx;
				border-bottom: 1px solid #d1d1d1;
				img{
					width:260rpx;
					height: 260rpx;
				}
				div{
					width:58%;
					position:relative;
					h3{
						font-size:28rpx;
						color:#333;
						overflow: hidden;
						text-overflow: ellipsis;
						display:-webkit-box; 
						-webkit-box-orient:vertical; 
						-webkit-line-clamp:4; 
					}
					p{
						font-size:22px;
						color:#fd8197;
						position:absolute;
						bottom:0;
						left:0;
					}
				}
			}
		}
	}
	.rote-container{
		margin-top:20rpx;
		background: #fff;
		padding:20rpx 0; 
		margin-bottom:40rpx;
		&>h3{
			color:#343434;
			width:720rpx;
			margin:0 auto;
			font-size:28rpx;
		}
		li{
			display: flex;
			justify-content: space-between;
			width:720rpx;
			margin:0 auto;
			margin-top:20rpx;
			border-bottom:1px solid #eee;
			padding-bottom:20rpx;
			img{
				width:25%;
				height:200rpx;
			}
			.rote-desc{
				width:72%;
				.rote-head{
					display: flex;
					justify-content: space-between;
				}
				h3,time{
					color:#999;
					font-size:28rpx;
				}
				p{
					line-height:20px;
					color:#999;
					font-size:28rpx;
					margin-top:16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical; 
					-webkit-line-clamp:3; 
				}
			}
		}
	}
</style>
